<template>
  <div class="sub-page-container">
    <div class="layout">
      <div class="main-content">
            <iframe class="iframe" src="http://10.3.68.118:9222" frameborder="0" width="100%" height="100%"></iframe>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import TabMenuItem from '@/views/aibody/components/tab-menu-item.vue';
import { AiMenuItem } from '@/types/global';

const tabConfig = ref<
  {
    title: string;
    key: string;
    menu?: AiMenuItem[];
  }[]
>([
  {
    title: '常用推荐',
    key: '1'
  },
  {
    title: '个人助手',
    key: '2'
  },
  {
    title: '学习助手',
    key: '3'
  },
  {
    title: '科研助手',
    key: '4'
  },
  {
    title: '办公提效',
    key: '5'
  }
]);

onMounted(() => {
  tabConfig.value = tabConfig.value.map(item => {
    item.menu = Array.from({ length: 8 })?.map(_item => ({
      icon: 'icon-code',
      name: '网页解读',
      desc: '智能总结，一键快看'
    }));
    return item;
  });
});
</script>

<style scoped lang="less">
.container {
  height: 100%;
  margin-top: 18px;
  margin-left: 24px;
  background-color: var(--color-menu-light-bg);
}

.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  .main-content{
    width: 100%;
    height: 100vh;
    padding-bottom: 100px;

    .iframe {
      overflow: auto;
    }
  }
}

.input-wraper {
  position: relative;
  max-width: 888px;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(255 255 255 / 100%);
  border-color: rgb(229 229 229 / 100%);
  border-width: 1px;
  border-radius: 1rem;
  box-shadow:
    0 0 #0000,
    0 0 #0000,
    0 4px 6px -1px rgb(0 0 0 / 10%),
    0 2px 4px -2px rgb(0 0 0 / 10%);
}

.flex {
  display: flex;
  flex-direction: column;
}

.textarea {
  flex-grow: 1;
  width: 80%;
  min-width: 860px;
  min-height: 8rem;
  padding: 12px;
  margin: 1rem;
  font-family: inherit;
  font-size: 100%;
  font-variation-settings: inherit;
  font-weight: inherit;
  font-feature-settings: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  resize: vertical;
  outline-width: 0;
  outline-style: solid;
}

.right-btns {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: rgb(255 255 255 / 100%);
  background-color: rgb(64 64 64 / 100%);
  border-radius: 9999px;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

:deep(.arco-tabs-nav-tab) {
  justify-content: center;
}
</style>

<style lang="less" scoped>
// responsive
@media (max-width: @screen-lg) {
  .layout {
    flex-wrap: wrap;

    &-left-side {
      flex: 1;
      flex-basis: 100%;
      margin-bottom: 16px;
    }

    &-content {
      flex: none;
      flex-basis: 100%;
      order: -1;
      padding: 0;
      margin-bottom: 16px;
    }

    &-right-side {
      flex-basis: 100%;
    }
  }
}
</style>
